<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>客户端</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/static/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<blockquote class="layui-elem-quote">
    Token唯一标识一个客户端，用于与etp服务端建立连接，请妥善保管，不要泄露！
</blockquote>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addClient">新增</button>
        <button class="layui-btn layui-btn-sm" lay-event="flushTable">刷新</button>
    </div>
</script>
<script type="text/html" id="clientToolbar">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs" lay-event="delete">删除</a>
    </div>
</script>
<script src="/static/layui/layui.js"></script>
<script>
    layui.use(['table', 'dropdown'], function () {
        var table = layui.table;
        table.render({
            elem: '#test',
            url: '/clients',
            toolbar: '#toolbarDemo',
            height: 'full-35', // 最大高度减去其他容器已占有的高度差
            cols: [[
                {field: 'name', fixed: 'left', width: 150, title: 'name'},
                {field: 'secretKey', title: 'Token'},
                {
                    field: 'status', title: '状态', sort: true, templet: function (d) {
                        if (d.status === 1) {
                            return ' <span class="layui-badge layui-bg-green">在线</span>';
                        } else if (d.status === 0) {
                            return '<span class="layui-badge">离线</span>';
                        }
                    }
                },
                {fixed: 'right', title: '操作', width: 134, minWidth: 125, templet: '#clientToolbar'}
            ]],
            error: function (res, msg) {
                console.log(res, msg)
            }
        });
    });
</script>
</body>
</html>
